<template>
  <div class="page f-c f-g">
    <div class="card f-s f-r a-c" style="margin-bottom: 20px;">
      <div class="f-r a-c" style="width: 100%">
        <div>
          <el-form inline>
            <el-form-item style="margin-right: 0" label="项目筛选">
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchParams.task" style="width: 200px">
                <el-option v-for="item in taskList" :value="item.id" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-date-picker v-model="searchParams.dateTime"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-select v-model="searchParams.status" style="width: 200px">
                <el-option v-for="item in statusList" :value="item.id" :label="item.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="f-g"></div>
        <div class="f-s f-r a-c" style="margin-bottom: 18px">
          <el-input placeholder="输入关键词进行搜索" style="max-width: 220px" v-model="searchParams.keyword" :prefix-icon="Search"></el-input>
          <el-button style="margin-left: 16px" type="primary" :icon="Plus" @click="openAdd">新建工单</el-button>
        </div>
      </div>
    </div>
    <div class="table-box f-g f-c">
      <div class="f-g">
        <el-table height="100%" :data="dataSource" >
          <el-table-column type="index" label="序号" width="80px">
          </el-table-column>
          <el-table-column label="项目类型" prop="name"> </el-table-column>
          <el-table-column label="工单图片" prop="name">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <ViewImage type="image" :image-url="scope.row.url"/>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="地图标点" prop="name"> </el-table-column>
          <el-table-column label="工单发起者" prop="name"> </el-table-column>
          <el-table-column label="工单接收者" prop="name"> </el-table-column>
          <el-table-column label="工单审核者" prop="name"> </el-table-column>
          <el-table-column label="操作" width="120px">
            <template #default="scope">
              <el-button type="text" @click="openDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="padding: 20px 0;text-align: center" class="f-r j-c a-c f-s">
        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[10, 50, 100, 200]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="changeSize"
            @current-change="changePage"
        />
      </div>
    </div>
    <el-dialog
        v-model="dialogVisible"
        title="新增工单"
        width="400"
    >
      <el-form class="custom-form" label-width="100px" :model="formData" :rules="formRules" label-position="left">
        <el-form-item label="标题：">
          <el-input v-model="formData.name" placeholder="请输入标题名称"></el-input>
        </el-form-item>
        <el-form-item label="所属项目：" >
          <el-select v-model="formData.projectId" >
            <el-option v-for="item in projectList" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="优先级：" >
          <el-select v-model="formData.level" >
            <el-option label="高" :value="1"></el-option>
            <el-option label="中" :value="2"></el-option>
            <el-option label="低" :value="3"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态：" >
          <el-select v-model="formData.status" >
            <el-option v-for="item in statusList" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建人：">
          <el-input v-model="formData.createUser" readonly placeholder="请输入创建人"></el-input>
        </el-form-item>
        <el-form-item label="处理人：" >
          <el-select v-model="formData.handler" filterable>
            <el-option v-for="item in userList" :value="item.id" :label="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="截至日期：">
          <el-date-picker prefix-icon="icon" v-model="formData.date" placeholder="请选择截至日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="地图标点：">
          <el-input v-model="formData.location" placeholder="请选择地图" readonly>
            <template #append>
              <el-button :icon="MapLocation" @click="openMap"/>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer f-r a-c j-c">
          <el-button type="primary" @click="confirmAdd">
            确认增加
          </el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog modal-class="flyRecordMapDialog" v-model="dialogMap" :show-close="false">
      <div class="flyRecordMap">
        <div class="map" id="flyRecordMap"></div>
      </div>
    </el-dialog>

  </div>
</template>
<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import {MapKey} from "@/plugins/amap";
import {onMounted, onUnmounted, ref} from "vue";
import useTable from "@/utils/useTable";
import { Plus, Search, MapLocation } from "@element-plus/icons-vue";
// 任务
const taskList = ref([
  // 全部，我创建的，已经完成的，待审核的，未完成的
  {
    id: 1,
    name: '全部'
  },
  {
    id: 2,
    name: '我创建的'
  },
  {
    id: 3,
    name: '已经完成的'
  },
  {
    id: 4,
    name: '待审核的'
  },
  {
    id: 5,
    name: '未完成的'
  }
]);
// 状态
const statusList = ref([
  // 待处理，待审核，驳回，已完成
  {
    id: 1,
    name: '待处理'
  },
  {
    id: 2,
    name: '待审核'
  },
  {
    id: 3,
    name: '驳回'
  },
  {
    id: 4,
    name: '已完成'
  }
]);

/**
 * 表格
 * @type {Ref<UnwrapRef<*[]>>}
 */
const {
  searchParams,
  pageNo,
  pageSize,
  total,
  changePage,
  changeSize,
  dataSource,
  search,
} = useTable({
  requestFn: { page: null },
  params: {
    task: 1,
    status: '',
    dateTime: new Date()
  }
})
dataSource.value = [
  {
    name: 'Matrice 300 RTK',
    total: 100,
    site: '北京市朝阳区',
    status: '已完成',
    startTime: '2022-01-01 12:00:00',
    endTime: '2022-01-01 12:00:00'
  },
  {
    name: 'Matrice 300 RTK',
    total: 100,
    site: '北京市朝阳区',
    status: '已完成',
    startTime: '2022-01-01 12:00:00',
    endTime: '2022-01-01 12:00:00'
  },
  {
    name: 'Matrice 300 RTK',
    total: 100,
    site: '北京市朝阳区',
    status: '已完成',
    startTime: '2022-01-01 12:00:00',
    endTime: '2022-01-01 12:00:00'
  },
]

const rowItem = ref(null)
const dialogVisible = ref(false)
const formData = ref({
  name: '',
  projectId: '',
  level: '',
  status: '',
  createUser: '',
  handler: '',
  date: '',
  location: ''
})
const formRules = ref({
  name: [
    { required: true, message: '请输入标题名称', trigger: 'blur' }
  ],
  projectId: [
    { required: true, message: '请选择所属项目', trigger: 'change' }
  ],
  level: [
    { required: true, message: '请选择优先级', trigger: 'change' }
  ],
  status: [
    { required: true, message: '请选择状态', trigger: 'change' }
  ],
  handler: [
    { required: true, message: '请选择处理人', trigger: 'change' }
  ],
  date: [
    { required: true, message: '请选择截至日期', trigger: 'change' }
  ],
  location: [
    { required: true, message: '请选择地图', trigger: 'change' }
  ]
})
const projectList = ref([])
const userList = ref([])
const openDetail = (row) => {
}
const openAdd = () => {
  dialogVisible.value = true
  rowItem.value = null
}
const confirmAdd = () => {
  dialogVisible.value = false
}

/**
 * 地图选点
 */
const dialogMap = ref(false)

/**
 * 地图
 */
let map = null;
const openMap = (row) => {
  dialogMap.value = true
  if (!map) {
    AMapLoader.load({
      key: MapKey, // 申请好的Web端开发者Key，首次调用 load 时必填
      version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
        .then((AMap) => {
          map = new AMap.Map("flyRecordMap", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            layers: [new AMap.TileLayer.Satellite()],
            zoom: 14, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
          });
        })
        .catch((e) => {
          console.log(e);
        });
  }
}
onUnmounted(() => {
  map?.destroy();
});

</script>

<style lang="scss">
.page {
  height: 100%;
  padding: 16px;
  overflow: auto;
  .card {
    padding: 12px 12px;
    border-radius: 4px;
    background-color: #FFFFFF;
    .title {
      font-family: PingFang SC;
      font-size: 16px;
      color: #1A1A1A;
      line-height: 20px;
      font-weight: 500;
    }
  }
  .custom-form {
    .el-form-item {
      background: rgba(243,243,243,0);
      border-radius: 8px;
      border: 1px solid #F3F3F3;
      padding: 4px 20px;
      .el-form-item__label {
        color: #898F9D;
      }
      .el-input__wrapper,
      .el-select__wrapper {
        box-shadow: none;
      }
    }
    .el-input-group__append {
      box-shadow: none;
    }
    .el-select__selected-item,
    .el-input__inner {
      text-align: right;
    }
  }

}
.flyRecordMapDialog {
  .el-dialog {
    padding: 0;
    background-color: transparent;
  }
  .el-dialog__header {
    display: none;
  }
  .flyRecordMap {
    width: 100%;
    min-height: 50vh;
    position: relative;
    .map {
      width: 100%;
      min-height: 50vh;
      background-color: green;
    }
    .flyRecordMap-control {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      background: rgba(0,0,0,0.3);
      padding: 10px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 99;
      .flyRecordMap-control-text {
        font-family: Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 24px;
        .green {
          color: #27FF45
        }
        .red {
          color: #FF2020
        }
        .green2 {
          color: #17BDB2;
        }
      }
      .flyRecordMap-control-left {
        display: flex;
        align-items: center;
        .wifi-icon {
          width: 24px;
          height: 18px;
          margin-right: 10px;
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
        .wifi-icon-1 {
          background-image: url("~@/assets/monitor/wifi-1.png");
        }
        .wifi-icon-2 {
          background-image: url("~@/assets/monitor/wifi-2.png");
        }
        .wifi-icon-3 {
          background-image: url("~@/assets/monitor/wifi-3.png");
        }
        .wifi-icon-4 {
          background-image: url("~@/assets/monitor/wifi-4.png");
        }
      }
      .refresh-icon {
        width: 20px;
        height: 18px;
        margin-left: 20px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        background-image: url("~@/assets/monitor/refresh.png");
        cursor: pointer;
      }
      .all {
        background-image: url("~@/assets/monitor/all.png");
      }
      .all1 {
        background-image: url("~@/assets/monitor/all1.png");
      }
      .all2 {
        background-image: url("~@/assets/monitor/all2.png");
      }
    }
  }
}

</style>